<div class="container">
    <div class="block-header">
        <h2>Widgets</h2>

        <ul class="actions">
            <li>
                <a href="">
                    <i class="zmdi zmdi-trending-up"></i>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="zmdi zmdi-check-all"></i>
                </a>
            </li>
            <li class="dropdown" uib-dropdown>
                <a href="" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="">Refresh</a>
                    </li>
                    <li>
                        <a href="">Manage Widgets</a>
                    </li>
                    <li>
                        <a href="">Widgets Settings</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="col-sm-4">
        <!-- Picture List -->
        <div class="card picture-list">
            <div class="card-header">
                <h2>Augue laoreet rutrum <small>Cras congue nec lorem eget posuere</small></h2>

                <ul class="actions">
                    <li class="dropdown action-show" uib-dropdown>
                        <a href="" uib-dropdown-toggle>
                            <i class="zmdi zmdi-more-vert"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <a href="">Refresh</a>
                            </li>
                            <li>
                                <a href="">Manage Widgets</a>
                            </li>
                            <li>
                                <a href="">Widgets Settings</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div class="pl-body">
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/1.png" alt="">
                    </a>
                </div>

                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/2.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/3.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/4.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/5.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/6.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/7.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/8.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/9.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/1.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/2.png" alt="">
                    </a>
                </div>
                <div class="col-xs-3">
                    <a href="">
                        <img src="img/headers/square/3.png" alt="">
                    </a>
                </div>
            </div>
        </div>

        <!-- Blog Posts -->
        <div class="card blog-post">
            <div class="bp-header">
                <img src="img/widgets/preview.jpg" alt="">

                <a href="" class="bp-title">
                    <h2>Samsung Galaxy Alpha</h2>
                    <small>Vivamus sagittis lacus vel augue laoreet rutrum</small>
                </a>
            </div>

            <div class="p-20">
                Pellentesque lacinia sagittis libero. Praesent vitae justo purus. In hendrerit lorem nisl, ac lacinia urna aliquet non. Quisque nisi tellus, rhoncus quis est sit amete in nisl molestie fringilla. Nunc vitae ante id magna feugiat condimentum. Maecenas sit amet urna massa.
            </div>
        </div>

        <!-- Tasks -->
        <div class="card">
            <div class="listview">
                <div class="lv-header">
                    Tasks
                </div>
                <div class="lv-body">
                    <div class="lv-item">
                        <div class="lv-title m-b-5">HTML5 Validation Report</div>

                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%">
                                <span class="sr-only">95% Complete (success)</span>
                            </div>
                        </div>
                    </div>
                    <div class="lv-item">
                        <div class="lv-title m-b-5">Google Chrome Extension</div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="sr-only">80% Complete (success)</span>
                            </div>
                        </div>
                    </div>
                    <div class="lv-item">
                        <div class="lv-title m-b-5">Social Intranet Projects</div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                <span class="sr-only">20% Complete</span>
                            </div>
                        </div>
                    </div>
                    <div class="lv-item">
                        <div class="lv-title m-b-5">Bootstrap Admin Template</div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                <span class="sr-only">60% Complete (warning)</span>
                            </div>
                        </div>
                    </div>
                    <div class="lv-item">
                        <div class="lv-title m-b-5">Youtube Client App</div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="sr-only">80% Complete (danger)</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="clearfix"></div>

                <a class="lv-footer" href="">View All</a>
            </div>
        </div>

        <!-- Video -->
        <div class="card">
            <video src="media/big_buck_bunny.mp4" height="197" style="width: 100%" data-media-element></video>
        </div>
        
        <!-- Contacts -->
        <div class="card">
            <div class="card-header ch-alt">
                <h2>Contact Information <small>Fusce eget dolor id justo luctus commodo vel pharetra nisi. Donec velit libero</small></h2>
            </div>
            <div class="card-body card-padding">
                <div class="pmo-contact">        
                    <ul>
                        <li class="ng-binding"><i class="zmdi zmdi-phone"></i> 00971123456789</li>
                        <li class="ng-binding"><i class="zmdi zmdi-email"></i> malinda.h@gmail.com</li>
                        <li class="ng-binding"><i class="zmdi zmdi-facebook-box"></i> malinda.hollaway</li>
                        <li class="ng-binding"><i class="zmdi zmdi-twitter"></i> @malinda (twitter.com/malinda)</li>
                        <li>
                            <i class="zmdi zmdi-pin"></i>
                            <address class="m-b-0 ng-binding">
                                44-46 Morningside Road,<br>
                                Edinburgh,<br>
                                Scotland
                            </address>
                        </li>
                    </ul>
                </div>
                
                <a class="pmo-map" href="">
                    <img src="img/demo/map.png" alt="">
                </a>
            </div>
        </div>
    </div>

    <div class="col-sm-4"  data-ng-controller="TabsDemoCtrl">
        <!-- Tab -->
        <div class="card">
            <div class="card-header">
                <h2>Praesent vitae justo purus <small>In hendrerit lorem nislac lacinia</small></h2>
            </div>
            
            <tabset justified="true">
                <tab ng-repeat="tab in tabs | limitTo:3" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                  <div class="p-l-25 p-r-25">{{tab.content}}</div>
                </tab>
            </tabset>
        </div>
        
        
        <!-- Todo Lists -->
        <div id="todo-lists" data-ng-controller="todoCtrl as tctrl">
            <div class="tl-header">
                <h2>Todo Lists</h2>
                <small>Add, edit and manage your Todo Lists</small>

                <ul class="actions actions-alt">
                    <li class="dropdown" uib-dropdown>
                        <a href="" uib-dropdown-toggle>
                            <i class="zmdi zmdi-more-vert"></i>
                        </a>

                        <ul class="dropdown-menu dropdown-menu-right">
                            <li>
                                <a href="">Refresh</a>
                            </li>
                            <li>
                                <a href="">Manage Widgets</a>
                            </li>
                            <li>
                                <a href="">Widgets Settings</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>

            <div class="clearfix"></div>

            <div class="tl-body">
                <div id="add-tl-item" data-ng-class="{ 'toggled': tctrl.addTodoStat === 1 }" data-ng-click="tctrl.newTodo()">
                    <i class="add-new-item zmdi zmdi-plus" data-ng-click="tctrl.addTodo($event)"></i>

                    <div class="add-tl-body">
                        <textarea placeholder="What you want to do..." data-ng-model="tctrl.todo"></textarea>

                        <div class="add-tl-actions">
                            <a href="" data-tl-action="dismiss" class="a-prevent zmdi zmdi-close" data-ng-click="tctrl.clearTodo()"></a>
                            <a href="" data-tl-action="save" class="a-prevent zmdi zmdi-check" data-ng-click="tctrl.clearTodo()"></a>
                        </div>
                    </div>
                </div>

                <div class="checkbox media" data-ng-repeat="w in tctrl.tdResult.list.slice(0,4)">
                    <div class="pull-right">
                        <ul class="actions actions-alt">
                            <li class="dropdown" uib-dropdown>
                                <a href="" uib-dropdown-toggle>
                                    <i class="zmdi zmdi-more-vert"></i>
                                </a>

                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li><a href="">Delete</a></li>
                                    <li><a href="">Archive</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="media-body">
                        <label>
                            <input type="checkbox">
                            <i class="input-helper"></i>
                            <span>{{ w.todo }}</span>
                        </label>
                    </div>
                </div>

            </div>
        </div>

        <!-- Social -->
        <div class="card go-social">
            <div class="card-header">
                <h2>Social with us <small>Nunc sit amet dapibus tellus</small></h2>
            </div>

            <div class="card-body clearfix">
                <a class="col-xs-4" href="">
                    <img src="img/social/facebook-128.png" class="img-responsive" alt="">
                </a>

                <a class="col-xs-4" href="">
                    <img src="img/social/twitter-128.png" class="img-responsive" alt="">
                </a>

                <a class="col-xs-4" href="">
                    <img src="img/social/googleplus-128.png" class="img-responsive" alt="">
                </a>

                <a class="col-xs-4" href="">
                    <img src="img/social/linkedin-128.png" class="img-responsive" alt="">
                </a>

                <a class="col-xs-4" href="">
                    <img src="img/social/youtube-128.png" class="img-responsive" alt="">
                </a>

                <a class="col-xs-4" href="">
                    <img src="img/social/blogger-128.png" class="img-responsive" alt="">
                </a>
            </div>
        </div>

        <!-- Form -->
        <div class="card">
            <div class="card-header ch-alt">
                <h2>Sample Form <small>Pellentesque ac lectus sed elit dictum vehicula</small></h2>
            </div>

            <div class="card-body card-padding">
                
                <div class="form-group fg-float m-b-30">
                    <div class="fg-line">
                        <input type="text" class="form-control input-sm">
                        <label class="fg-label">Name</label>
                    </div>
                </div>

                <div class="form-group fg-float m-b-30">
                    <div class="fg-line">
                        <input type="text" class="form-control input-sm">
                        <label class="fg-label">Email address</label>
                    </div>
                </div>

                <div class="form-group fg-float m-b-30">
                    <div class="fg-line">
                        <input type="text" class="form-control input-sm">
                        <label class="fg-label">Contact Number</label>
                    </div>
                </div>

                <div class="form-group fg-float">
                    <div class="fg-line">
                        <textarea class="form-control input-sm" auto-size></textarea>
                        <label class="fg-label">Message</label>
                    </div>
                </div>

                <button class="btn btn-info">Submit</button>
                <button class="btn btn-link">Cancel</button>
            </div>
        </div>
    </div>

    <div class="col-sm-4">
        <!-- Rating -->
        <div class="card rating-list">
            <div class="listview">
                <div class="lv-header">
                    <div class="m-t-5">
                        Average Rating 3.0
                    </div>

                    <div class="clearfix"></div>

                    <div class="rl-star">
                        <i class="zmdi zmdi-star active"></i>
                        <i class="zmdi zmdi-star active"></i>
                        <i class="zmdi zmdi-star active"></i>
                        <i class="zmdi zmdi-star"></i>
                        <i class="zmdi zmdi-star"></i>
                    </div>
                </div>

                <div class="lv-body">
                    <div class="p-15">
                        <div class="lv-item">
                            <div class="media">
                                <div class="pull-left">
                                    1 <i class="zmdi zmdi-star"></i>
                                </div>

                                <div class="pull-right">20</div>

                                <div class="media-body">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="lv-item">
                            <div class="media">
                                <div class="pull-left">
                                    2 <i class="zmdi zmdi-star"></i>
                                </div>

                                <div class="pull-right">45</div>

                                <div class="media-body">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="lv-item">
                            <div class="media">
                                <div class="pull-left">
                                    3 <i class="zmdi zmdi-star"></i>
                                </div>

                                <div class="pull-right">60</div>

                                <div class="media-body">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="lv-item">
                            <div class="media">
                                <div class="pull-left">
                                    4 <i class="zmdi zmdi-star"></i>
                                </div>

                                <div class="pull-right">78</div>

                                <div class="media-body">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width: 78%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="lv-item">
                            <div class="media">
                                <div class="pull-left">
                                    5 <i class="zmdi zmdi-star"></i>
                                </div>

                                <div class="pull-right">22</div>

                                <div class="media-body">
                                    <div class="progress">
                                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" style="width: 22%">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Profile view -->
        <div class="card profile-view">
            <div class="pv-header">
                <img src="img/profile-pics/profile-pic.jpg" class="pv-main" alt="">
            </div>

            <div class="pv-body">
                <h2>Malinda Hollaway</h2>
                <small>Praesent vitae justo purus. In hendrerit lorem nislac lacinia urnaunc vitae ante id magna </small>

                <ul class="pv-contact">
                    <li><i class="zmdi zmdi-pin"></i> Jupitor</li>
                    <li><i class="zmdi zmdi-phone"></i> +11 55694785</li>
                </ul>

                <ul class="pv-follow">
                    <li>589 Followers</li>
                    <li>8545 Followings</li>
                </ul>

                <a href="" class="pv-follow-btn">Follow</a>
            </div>
        </div>

        <!-- Listview -->
        <div class="card" data-ng-controller="recentpostCtrl as rpctrl">
            <div class="listview">
                <div class="lv-header">
                    Messages
                </div>
                <div class="lv-body">

                    <a class="lv-item" href="" data-ng-repeat="w in rpctrl.rpResult.list">
                        <div class="media">
                            <div class="pull-left">
                                <img class="lv-img-sm" data-ng-src="img/profile-pics/{{ w.img }}" alt="">
                            </div>
                            <div class="media-body">
                                <div class="lv-title">{{ w.user }}</div>
                                <small class="lv-small">{{ w.text }}</small>
                            </div>
                        </div>
                    </a>

                </div>
                
                <div class="clearfix"></div>
                
                <a class="lv-footer" href="">View All</a>
            </div>
        </div>

        <!-- Custom header -->
        <div class="card">
            <div class="card-header bgm-cyan"> <!-- Please refer the Colors page in User Interface for more color classes -->
                <h2>Text with custom header <small>Nam at dui sed lacus lacinia lobortis</small></h2>
            </div>

            <div class="card-body card-padding">
                Cras leo sem, egestas a accumsan eget, euismod at nunc. Praesent vel mi blandit, tempus ex gravida, accumsan dui. Sed sed aliquam augue. Nullam vel suscipit purus, eu facilisis ante. Mauris nec commodo felis. Donec eget felis et sem scelerisque euismod eget sit amet nunc.
            </div>
        </div>

    </div>

</div>
